<template>
  <view>
    <uni-popup
      ref="reserve"
      type="center"
      borderRadius="16px 16px 0 0"
			zindex
    >
      <view class="carListBox">
        <view class="text-xll tis">
        	您的饮食习惯
        </view>
				<view class="text-df tipss">
					请选择您的习惯，菜品推荐更精准
				</view>
				<view class="taste">
					  <view class="tase_item" v-for="(item,index) in taseList" :key="index" @click="changeTase(item,index)">
							 <view class="item_box" :style="{backgroundColor:index==cuIndexT?'#53A87F':'#fff'}">
							 	 <view class="cirs" :style="{backgroundImage:index==cuIndexT?'linear-gradient(180deg, #8FFFC9 0%, #53A87F 100%)':item.criBg}"></view>
							   <view class="tase_itemss">
							   	  <view class="ti_n" :style="{color:index==cuIndexT?'#fff':'#333'}">
							   	  	 {{item.ties}}
							   	  </view>
										<view class="ti_in" :style="{color:index==cuIndexT?'#fff':'#999'}">
											 {{item.indece}}
										</view>
							   </view>
							 </view>
					  </view>
				</view>
			</view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["choseTase"]);
const reserve = ref();
const cuIndexT=ref(0)
const taseList=ref([
	{
		ties:"口味",
		indece:"干净好吃才是硬道理",
		value:"0",
		criBg:"linear-gradient(180deg, #FFEDE6 0%, #FFF 100%)",
	},
	{
		ties:"地中海饮食",
		indece:"少油少盐，健康年轻态",
		value:"1",
		criBg:"linear-gradient(180deg, #EEE6FF 0%, #FFF 100%)",
	},{
		ties:"减脂",
		indece:"关注卡路里摄入",
		value:"2",
		criBg:"linear-gradient(180deg, #E1F8E9 0%, #FFF 100%)",
	},{
		ties:"月子餐",
		indece:"分阶段综合调理",
		value:"3",
		criBg:"linear-gradient(180deg, #D7FFFF 0%, #FFF 100%)",
	}
])

const changeTase=(item:any,index:any)=>{
	cuIndexT.value=index
	emit("choseTase",item)
	close()
}

// const doSubmit=()=>{
// 	close()
// }
const open = (v?: any) => {
  reserve.value.open();
};
const close = () => {
	setTimeout(()=>{
		reserve.value.close();
	},100)
  
};

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.carListBox {
  width: 708rpx;
  min-height: 100rpx;
  background: linear-gradient(180deg, #FAFDFE 0%, #EBF6FF 49%, #EDFFE7 100%);
	padding: 70rpx 0rpx 50rpx 0rpx;
  border-radius: 20rpx;
	.tis{
		font-weight:700;
		padding: 0rpx 20rpx 0rpx 50rpx;
	}
	.tipss{
		color:#000;
		margin-top:15rpx;
		padding: 0rpx 20rpx 0rpx 50rpx;
	}
	.taste{
		 width: 100%;
		 min-height:200rpx;
		 margin-top: 20rpx;
		 border-radius: 30rpx;
		 .tase_item{
			 width: 618rpx;
			 min-height:162rpx;
			 border-radius: 30rpx;
			 margin-top: 15rpx;
			 margin-left: 45rpx;
			 overflow:hidden;
			 .item_box{
				 width: 100%;
				 height:100%;
				 position: relative;
				  border-radius: 30rpx;
				  overflow:hidden;
				 .cirs{
				 		width: 380rpx;
				 		height:290rpx;
				 		position: absolute;
				 		border-radius: 50%;
				 		left:-160rpx;
				 		top:-170rpx;
				 		z-index:1;
				 }
				 .tase_itemss{
					 width:100%;
					 height:100%;
				 	 z-index:2;
					 position: relative;
					 padding: 20rpx 20rpx 10rpx 70rpx;
				 	  .ti_n{
				 	 	 font-size: 48rpx;
				 	 	 color:#fff;
				 	 	 font-weight: 700;
				 	  }
						.ti_in{
							font-size: 28rpx;
							color:#fff;
							font-weight: 400;
							margin-top: 20rpx;
						}
				 }
			 }
		 }
	}
}
</style>